<template>
    <div>
   <div class="content" v-for="v in volunteerInfo" :key="v.vno">
				<div class="a1">
						<img class="big" src="img">						
				</div>									
				<div class="a2">
					<h2>{{v.vname}}</h2>
					<div class="a21">
						
                            <p></p>
							<span class="color">志愿活动时间：</span>
                            <p></p>
							<span class="neir">{{v.activitytime}}</span>																
							<p></p>
							<span class="color">活动地点：</span>
                            <p></p>
							<span class="neir">{{v.vspot}}</span>
							<p></p>
							<span class="color">报名开始时间：</span>
                            <p></p>
							<span class="neir">{{v.starttime}}</span>
                            <p></p>
							<span class="color">报名截止时间：</span>
                            <p></p>
							<span class="neir">{{v.deadline}}</span>						
							<p></p>
							<span class="color">招募人数：</span>
                            <p></p>
							<span class="neir">{{v.headcount}}</span>
                            <p></p>
							<span class="color">实践时长</span>
							<p></p>
                            <span class="neir">{{v.activitytime}}</span>
                            <p></p>
							<span class="color">活动报酬：</span>
							<p></p>
                            <span class="neir">{{v.reward}}</span>
                            <p></p>
							<span class="color">工作内容：</span>
							<p></p>
                            <span class="neir">{{v.task}}</span>
						</div>
					
						<div class="a25">
							
							<a href="#"><button class="a25color2" >参与</button></a>
						</div>
					
				</div>
			</div>
        </div>
</template>

<script>
    export default {
       props:['id'],
       data(){
        return {
          volunteerInfo:{},
          img: require('@/assets/img/登录.jpg')
        }
       },
       created(){
        this.getVolunteerInfo()
       },
       methods:{
        getVolunteerInfo(){
            this.axios.get('http://localhost:8080/volunteering/list',{params:{id:this.id}}).then(res=>{
                if(res.data.code==0){
                    this.volunteerInfo=res.data.data
                }else{
                    alert(res.data.msg)
                }
            })
            console.log(this.id)
        },
		
       }
    }
</script>

<style lang="scss" scoped>

.content{
/* 	border: 1px solid red; */
	width: 1200px;
	margin-top: -80px;
	margin: auto;
}
.content .a1{
	float: left;
	margin-left: 10px;
}
.content .a1 .big{
	/* float: left; */
	width: 150px;
	height: 180px;
}

.content.a2{
	display:inline-block;
	position:relative;
    background-color: #F2F5F8;
}
.content.a21 .color{
	color: #758188;
    font:40pt;
}

.content.a21{
	background-color: #F6F9FB;
}
.content.a21 span,p{
	display:block;
}
.content.a21 .neir{
	display:block;
    font:40pt;
    color: #000000;
}


.content.a25{
	margin-top: 30px;
}
.content.a25 button{
	display: inline-block;
	width: 100px;
	height: 60px;
	border-radius: 30px;
	margin-left: 30px;
}
.content.a25 .a25color2{
	background-color: #FFEEE8;
	color: #0d9eff;
	font-size: 20px;
	font-weight: bolder;
	border: 1px #0dcfff solid;
}


</style>